<template>
	<div
		class="flex justify-between items-center w-full bg-[#1B2538] py-2 px-4 rounded-lg overflow-x-auto">
		<base-switch-tabs
			:modelValue="modelValue"
			@update:modelValue="handleChangeTab"
			:data="showTabs"
			translation
			style="--text-color: #ffffff; --min-width: auto"
			activeTextBold />
		<div class="flex" v-if="isPC()">
			<div class="flex justify-between items-center mr-2 whitespace-nowrap">
				<span class="m-1">{{ $t('app.privateMode') }}</span>
				<n-switch v-model:value="mode" :on-update:value="changeMode" />
			</div>
			<base-popselect
				@update:model-value="handeChangeSize"
				v-model="pageSize"
				selected-class="mr-1 w-[60px] h-[28px] rounded-lg bg-bg-3 px-3"
				:options="options"></base-popselect>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { NSwitch } from 'naive-ui'
import { BaseSwitchTabs, SwitchTabsType, BasePopselect } from '@/components/base/'
import { computed, ref } from 'vue'
import { isPC } from '@/utils'
import { useProfileStore } from '@/store'
const profileStore = useProfileStore()
const mode = ref(profileStore.userInfo?.incognitoMode)
const pageSize = ref(10)
const props = defineProps({
	modelValue: {
		type: String,
		required: true
	},
	tabs: {
		type: Array,
		default: () => []
	}
})

const emits = defineEmits(['update:modelValue', 'changeMode', 'changeSize'])

const options = [
	{
		text: '10',
		id: 10
	},
	{
		text: '20',
		id: 20
	},
	{
		text: '30',
		id: 30
	},
	{
		text: '40',
		id: 40
	},
	{
		text: '50',
		id: 50
	}
]

const tabList: SwitchTabsType = [
	// {
	// 	id: 'myBet',
	// 	name: 'app.myBet'
	// },
	{
		id: 'casinoBets',
		name: 'app.casinoBet'
	},
	// {
	// 	id: 'sportsBet',
	// 	name: 'app.sportsBet'
	// },
	{
		id: 'race',
		name: 'race.title'
	}
]

const showTabs = computed(() => tabList.filter((item) => props.tabs.includes(item.id)))

const handleChangeTab = (val: string) => {
	emits('update:modelValue', val)
}

const handeChangeSize = (val: number) => {
	pageSize.value = val
	emits('changeSize', val)
}

const changeMode = (val: boolean) => {
	mode.value = val
	emits('changeMode', val)
}
</script>
